<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">热门品牌</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail1" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>
    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">手机通讯</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail2" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>


    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">运营商</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail3" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>


    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">手机配件</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail4" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>


    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">摄影影像</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail5" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>


    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">影音娱乐</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail6" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>

    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">数码配件</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail7" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>

    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">智能设备</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail8" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>

    <div>
      <div style="display: flex;justify-content: space-between">
        <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">电子教育</div>

      </div>

      <div class="box">
        <div v-for="(item,index) in Detail9" :key="index" class="list">
          <img :src="item.src" alt="">
          <br>
          <span style="font-size: 0.875rem">{{item.text}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mobile",
  data:()=>({
    Detail1:[],
    Detail2:[],
    Detail3:[],
    Detail4:[],
    Detail5:[],
    Detail6:[],
    Detail7:[],
    Detail8:[],
    Detail9:[],
  }),
  created() {

  },
  mounted(){
    let that=this;
    let url='http://localhost:5000';
    this.$http.get(url+'/data/Classify.json')
        .then(function (response) {

          that.Detail1=response.data.Detial1.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail2=response.data.Detial2.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail3=response.data.Detial3.map(i=>({
            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail4=response.data.Detial4.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail5=response.data.Detial5.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail6=response.data.Detial6.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail7=response.data.Detial7.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail8=response.data.Detial8.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
          that.Detail9=response.data.Detial9.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
  },
  methods:{




  }
}
</script>

<style scoped>
.list{
  width: 5.25rem;
  height: 6.75rem;
}
.list img{
  width: 4.375rem;
  height: 4.375rem;
}
.box{
  padding: 0.625rem;
  display: flex;
  flex-wrap: wrap;

}
</style>